<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<style>

    #app{
        height: 100vh;
        background: #f8f8f8;
    }


    .listContainer {
        background-color: white;
    }

    .listItem {
        list-style: none;
        padding: 16px 0;
        margin: 0 16px;
        border-bottom: 1px solid #f8f8f8;
    }
    .listItem img{

        float: left;
        width: 40px;
        height: 40px;
        margin-right: 16px;
        line-height: 40px;
    }

    .date {
        color: gray;
        font-size: 12px;
    }

    .status {

        color: gray;
        font-size: 12px;
    }

    .line{

    }
</style>

<body>
<div id="app">
    <ul class="listContainer">
        <li class="listItem" v-for="(item,index) in listData">
            <img src="./img/questionnaire.png" />
            <div>
                <p>{{item.title}}</p>
                <span class="date">{{item.date}}</span>
                <span class="status">{{item.status}}</span>
            </div>
            <p class="line"></p>
        </li>
    </ul>
</div>
</body>
<script>

    new Vue({
        el: '#app',
        data: {
            listData: [
                {
                    id: 1,
                    title: "带你了解问卷调研",
                    date: "2021年11月23日",
                    status: "未完成",
                },
                {
                    id: 2,
                    title: "新手问卷",
                    date: "2021年11月23日",
                    status: "未完成",
                }
            ]
        },
        created: function () {
            this.getAllData()
        },
        methods: {
            getAllData: function () {
                // 获取数据条目
            }
        }
    })

    document.querySelector("button").onclick = function () {
        ShareToCoinJSFace.log("嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻")
        ShareToCoinJSFace.click()
        ShareToCoinJSFace.show()
    }

    function a(a, b) {
        //   alert(a+b)
        return {
            "a": 6,
            "b": 1
        }
    }
</script>

</html>